<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('注册')">

</head>

<body>

<div id="app">
    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/login-bg.png'}" class="login_bg" alt="">
    <a th:href="@{/}" class="login-index">
        <img th:src="${#request.getAttribute('ctx') + '/static/logo.png'}" alt="">
    </a>
    <div class="login_box clearfix">
        <div class="login_box_left">
<!--            <img cus:sysc="regist-page-pic,regist-page-pic,${#request.getAttribute('uploadServer')},,src">-->
        </div>
        <div class="login_box_right register_box_right">
            <img th:src="${#request.getAttribute('ctx') + '/static/front/img/register-text.png'}" style="display: block;margin-bottom: 32px; width: 120px;">
            <form :model="form">
                <input type="hidden" name="thirdpart-user-type" v-model="form.thirdpartUserType">
                <input type="hidden" name="thirdpart-user" v-model="form.thirdpartUser">
                <input type="hidden" name="openID" v-model="form.openID">
                <div class="text">
                    <i></i>
                    <input class="mobile-for-sms-code" type="text" name="" id="phone" value="" v-model="form.mobile" @change="mobileVali" placeholder="请输入手机号"/>
                    <span class="c_phone">手机号格式错误</span>
                    <span class="k_phone">手机号不能为空</span>
                </div>

                <div class="text">
                    <i></i>
                    <input type="password" name="" id="password" value="111111" v-model="form.password" placeholder="密码 (6-16位字母、数字、下划线)"/>
                    <span class="c_pass">密码不能少于6位或是大于16位</span>
                    <span class="k_pass">密码不能为空</span>
                </div>
                <div class="text">
                    <i></i>
                    <input type="password" name="" id="password_2" value="111111" v-model="form.passwords" placeholder="确认密码"/>
                    <span class="c_pass_2">两次密码不一致</span>
                    <span class="k_pass_2">确认密码不能为空</span>
                </div>
                <div class="text">
                    <i></i>
                    <input style="width: 55%;" type="text" name="" id="verify" value="1111" v-model="form.validate" placeholder="验证码"/>
                    <button type="button" class="get-sms-code" :disabled="!iscross" :style="color" style="border: 0; background: #fff; cursor: pointer; width:30%; height: 28px; color:#ff5722;">
                        发送验证码
                    </button>
                    <span class="c_verify">验证码错误</span>
                    <span class="k_verify">验证码不能为空</span>
                </div>
                <div class="submit">
                    <input type="button" value="注册" :disabled="!iscross" :style="background" @click="register"/>
                </div>
                <div class="jizhu clearfix" style="padding:0; margin-top: 32px;">
                    <div class="left">
                        <input type="checkbox" name="" id="agree"/>
                        <span>已阅读并同意<a th:href="@{'/brand?type=platform&m=1'}" target="_blank" style="color: #ff5722;">《巨桃游娱用户协议》</a></span>
                    </div>
                    <div class="right">
                        <a th:href="@{/login}" style="color: #ff5722;">已有账号,登录</a>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
</body>

<!--/* 公用js */-->
<script type="text/javascript" th:src="@{'/static/common/jquery.min.js'}"></script>

<script type="text/javascript" th:src="@{'/static/common.js?v=0.1'}"></script>
<!--/* 自定义常量 */-->
<script type="text/javascript" th:src="@{'/static/common/constant.js?v=0.1'}"></script>
<!--/* 自定义工具类 */-->
<script type="text/javascript" th:src="@{'/static/common/tools/tools.vue.js?v=0.1'}"></script>
<script type="text/javascript" th:src="@{'/static/common/tools/tools.extend.js?v=0.1'}"></script>
<script type="text/javascript" th:src="@{'/static/common/tools/tools.validate.js?v=0.1'}"></script>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: {
            form: {
                mobile: '',
                password: '',
                passwords: '',
                validate: '',
                openID: [[${#request.getSession().getAttribute('openID')}]]
            },
            iscross: false,
            color: {color: 'rgb(211, 211, 211)'},
            background: {background: 'rgb(211, 211, 211)'}
        },
        methods: {
            mobileVali: function () {
                if ($.trim(this.form.mobile).length != 0 && Pattern.CHINA_MOBILE.test(this.form.mobile)) {
                    this.iscross = true;
                    this.color.color = '#ff5722';
                    this.background.background = '#ff5722';
                } else {
                    this.iscross = false;
                    this.color.color = 'rgb(211, 211, 211)';
                    this.background.background = 'rgb(211, 211, 211)';
                }
            },

            register: function (data) {
                if (!$('#agree').is(':checked')) {
                    ELEMENT.Message.info(Messages.PLEASE_READ_USER_AGREEMENT);
                    return false;
                }
                var _self = this;
                $.ajax({
                    url: '/api/regist',
                    type: 'post',
                    data: {
                        mobile: this.form.mobile,
                        password: this.form.password,
                        passwords: this.form.passwords,
                        validate: this.form.validate,
                        openID: this.form.openID
                    },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                            ELEMENT.Message.success(Messages.REGISTER_SUCCESS);
                            setTimeout(function() {
                                window.location.href = ctx + '/login';
                            }, 3000);
                        } else {
                            ELEMENT.Message.error(result.error);
                        }
                    },
                    error: function (result) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
            }
        }
    })
</script>

</html>
